import React,{useState,useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
import './Login.scss'
import{Button,Form,Input} from "antd";
import MyNotification from '../../components/MyNotification/MyNotification';
import { $login,$getOne } from '../../api/adminApi';
import {  useDispatch } from 'react-redux';
import { adminSlice } from '../../redux';
export default function Login() {
    //定义redux的派发器
    const dispatch=useDispatch()
    //获取更新admin全局数据的action
    let {setAdmin} =adminSlice.actions
    let navigate=useNavigate()
    useEffect(()=>{
        if(sessionStorage.getItem("token")){
            navigate('/layout')
        }
    },[])
    let [notiMsg,setNotiMsg]=useState({type:'',description:''})
    let [form]=Form.useForm()
    const onFinish=async (values)=>{
        let {message,success}=await $login(values)
        if(success){
            sessionStorage.setItem('loginId',values.loginId)
            let admin=await $getOne({loginId:values.loginId})
            //将当前登录账户信息，存储到全局
            dispatch(setAdmin(admin))
            setNotiMsg({type:'success',description:message})
            navigate('/layout')
        }else{
            setNotiMsg({type:'error',description:message})
        }
    };
    // const onFinishFailed=(errorInfo)=>{
    //     console.log('Failed:',errorInfo);
    // }
    return (
        <div className='login'>
            <div className="content">
            <h2>酒店后台管理系统</h2>
            <Form
                        name="basic"
                        form={form}
                        labelCol={{
                            span:4,
                        }}
                        wrapperCol={{
                            span:18,
                        }}
                        initialValues={{
                            loginId:'',
                            loginPwd:''
                        }}
                        onFinish={onFinish}
                        // onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        >
                            <Form.Item
                            label="账号："
                            name="loginId"
                            rules={[
                                {
                                    required:true,
                                    message:"Please input your username!",
                                },
                            ]}
                            >
                                <Input/>

                            </Form.Item>
                            <Form.Item
                            label="密码："
                            name="loginPwd"
                            rules={[
                                {
                                    required:true,
                                    message:"Please input your passward"
                                }
                            ]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item
                            wrapperCol={{
                                offset:4,
                                span:16,
                            }}
                            >
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                                <Button onClick={()=>{
                                    form.resetFields()
                                }} style={{marginLeft:'10px'}}>
                                    取消
                                </Button>
                            </Form.Item>
             </Form>
            </div>
            <MyNotification notiMsg={notiMsg}/>
        </div>
    )
}
